<template>
<div>
    <l-header></l-header>
    <div class="w89">
        <van-form  @submit="onSubmit" ref="form" scroll-to-error  @failed="failed"
         validate-trigger="onChange">
            <div v-for="(item,index) in list" :key="index">
                <k-firstTitle :val="item['title_'+langSuff]" v-if="item.type=='firstTitle'" />
                <k-textarea :val="item['title_'+langSuff]" v-if="item.type=='textarea' || item.type=='editor'" />
                <k-input :val.sync="form[item.name]" :list="item" v-if="item.type=='input'"/>
                <k-date :val.sync="form[item.name]" :list="item" :showTime="showTime" v-if="item.type=='datetime'" />
                <k-date :val.sync="form[item.name]" :list="item" :showTime="showTime" v-if="item.type=='date'" />
                <k-select :val.sync="form[item.name]" :list="item" v-if="item.type=='select'" />
                <k-switch :val.sync="form[item.name]"   :list="item" v-if="item.type=='switch'" />
                <k-radio  :val.sync='form[item.name]' :list="item" v-if="item.type=='radio'" />
                <k-checkbox  :val.sync='form[item.name]' :list="item" v-if="item.type=='checkbox'" />
                <k-identCards :val.sync="form[item.name]" :list="item" v-if="item.type=='identCards'" ></k-identCards>
                <k-upload :val.sync="form[item.name]" :list="item" v-if="item.type=='upload'"></k-upload>
                <k-text :val="item['title_'+langSuff]"  v-if="item.type=='text'"></k-text>
                <k-row :defaultValue="form[item.keyName]" :value="item.keyValue" :list="item" :formItem.sync="form" v-if="item.type=='row' && showRow(form[item.config.keyName],item.config.keyValue , item.config.keyName)"></k-row>
            </div>
        </van-form>
        <!-- <div class="next-step van-button van-button--info van-button--normal van-button--block" @click="submitBloak">
            {{$t('documentType.index.5636jiatocw0')}}
        </div> -->
            <van-button type="info" block class="next-step" :loading="loading" @click="submitBloak">{{$t('documentType.index.5636jiatocw0')}}</van-button>
    </div>
</div>
</template>
<script>
import {  submitList} from '@/api/common'

export default {
    inject: ['StepsPage','user_fill','page_info','onload'],
    computed:{
        StepsPageList(){
            return this.StepsPage()
        },
        user_fill_list(){
            return this.user_fill()
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        listPage(){
            return this.page_info().fields
        },
        
    },
    data() {
        return {
            form:{},
            list:[],
            loading:false,
            showTime:{min:11 ,max:18},
        }
    },
    created(){
        this.form={}
        this.loading=false;
    },
    mounted(){
        var  _this  =this;
    },
    methods:{
        submitBloak(){
            var  list = this.$refs.form.submit()
        },
        onSubmit(){
            var _this  =this;
            this.loading=true;
            var { curr_id  } =  this.StepsPageList;
            var obj = Object.assign({}, { pageId:curr_id  , fields :Object.assign({},this.form)})
            submitList(obj)
            .then(res=>{
                if(res.code==1){
                    this.$nextPage({pageId:this.StepsPageList.next_id})
                    .then(next=>{
                        this.loading = false;
                    })
                }else{
                    this.loading = false;
                    this.$toast(res.msg)
                }
            })
            .catch((res)=>{
                this.loading = false;
            })
        },
        failed(err){
            console.log(err)
        },
        showRow(defaultValue,val , defaultKey){
            // defaultValue  关联字段选择的值
            // val  后台返回的值
            // defaultKey 关联字段的key
            var list   =  this.list.find(item=> item.name == defaultKey )
            if(list && list.type=='identCards' && defaultValue && defaultValue !==''){
                return true
            }
            if((defaultValue && val) && defaultValue == val){
                return true
            }else{
                return false
            }
        },
    },
    watch:{
        listPage:{
            handler(list,old){
                this.list=[]
                this.$forceUpdate();
                this.list = list;
                
            }
        },
        user_fill_list:{
            handler(list,old){
                this.loading=false;
                this.form={}
                this.$forceUpdate();
                this.form = list
            },
            immediate:true,
            deep:true
        }
    
        
    }
}
</script>